<template>
  <div>
    <el-container>
      <!-- 左侧 -->
      <el-aside
        width="200px"
        v-show="isShowLeft"
      >
        <!-- <div style="display: flex;justify-content: center;align-items:center;background-color: #fff;margin-left:20px;width: 160px;height:70px;border-radius:20px"> -->
        <div style="margin-top:20px;display: flex;justify-content: center">
          <img
            src="@/assets/img/logo.png"
            style="width: 80px;height: 60px;border-radius: 20px;"
          >
        </div>
        <!-- 菜单组件 -->
        <!-- default-active index进行匹配 确认当前选中的菜单 -->
        <!-- <el-menu
          :default-active="index"
          class="el-menu-vertical-demo"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#1890ff"
          router
        > -->
        <!-- 具有子菜单组 下级多个子菜单 -->
        <!-- <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">分组一</template>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu> -->
        <!-- 单个子菜单 -->
        <!-- <el-menu-item index="/admin/dashboard">
          <i class="el-icon-menu"></i>
          <span slot="title">控制台</span>
        </el-menu-item>
        <el-menu-item index="/admin/user">
          <i class="el-icon-document"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/goods">
          <i class="el-icon-setting"></i>
          <span slot="title">商品管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/permission">
          <i
            class="el-icon-s-promotion"
            style="color:red"
          ></i>
          <span slot="title">权限管理</span>
        </el-menu-item>
        </el-menu> -->
        <el-menu
          :default-active="index"
          class="el-menu-vertical-demo"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#1890ff"
          router
        >
          <el-menu-item
            v-for="item,index in menuList"
            :key="item.name"
            :index="item.path"
          >
            <!-- 判断权限管理图标 颜色为红色 -->
            <i
              v-if="item.name==='权限管理'"
              :class="iconList[index]"
              style="color:red"
            ></i>
            <!-- 其他菜单的图标颜色正常 -->
            <i
              v-else
              :class="iconList[index]"
            ></i>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 右侧 -->
      <el-container>
        <!-- 头部 -->
        <el-header>
          <div style="display:flex;">
            <i
              class="header-icon"
              :class="isShowLeft?'el-icon-s-fold':'el-icon-s-unfold'"
              @click="isShowLeft=!isShowLeft"
            ></i>
            <div
              style="margin-top:18px;font-size:18px;font-weight:bold"
              v-if="$store.state.username"
            >欢迎【{{$store.state.username}}】登录！
              <span>
                <el-popconfirm
                  title="确认退出吗?"
                  @confirm="logout"
                  confirm-button-text="yes"
                  confirm-button-type="warning"
                >
                  <el-button
                    type="danger"
                    size="mini"
                    slot="reference"
                  >注销</el-button>
                </el-popconfirm>
              </span>
            </div>
            <i
              class="header-icon"
              :class="fullscreen?'el-icon-close':'el-icon-full-screen'"
              style="margin-left: 20px;"
              @click="changeFullScreen"
            ></i>
          </div>
        </el-header>
        <!-- 主体 -->
        <el-main>
          <!-- 子路由跳转组件页面渲染的地方 -->
          <!-- transition 过渡组件 css动画过渡 -->
          <!-- enter-active-class 进入时触发的动画 -->
          <!-- leave-active-class 离开时触发的动画 -->
          <transition
            enter-active-class="animate__animated animate__fadeIn"
            leave-active-class="animate__animated animate__fadeOut"
          >
            <router-view></router-view>
          </transition>
        </el-main>
        <!-- 底部 -->
        <el-footer>版权所有©TY-HTML5-JY-2205</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import axios from '@/http/req'
import url from '@/config/url'
import 'animate.css'
export default {
  data() {
    return {
      // 根据当前路由路径 来动态设置默认选中的菜单
      index: this.$route.path,
      // 默认显示左侧菜单
      isShowLeft: true,
      // 是否全屏
      fullscreen: false,
      // 菜单列表
      menuList: JSON.parse(localStorage.getItem('acl')),
      // 菜单列表显示的小图标
      iconList: [
        'el-icon-menu',
        'el-icon-document',
        'el-icon-user',
        'el-icon-setting',
        'el-icon-s-promotion'
      ]
    }
  },
  // 方法一、通过组件创建前的生命周期 对于用户是否登录进行判断
  // beforeCreate() {
  // 如果本地没有存储用户名或者token代表用户没有登录
  //   if (!localStorage.getItem('username') || !localStorage.getItem('token')) {
  //     // 不允许进入到后台管理界面  跳转到登录页面
  //     this.$message({
  //       message: '请先登录!',
  //       type: 'warning',
  //       duration: 1000,
  //       onClose: () => {
  //         this.$router.push('/login')
  //       }
  //     })
  //   }
  // },
  // 方法二: 路由守卫进行限制  组件内守卫
  // beforeRouteEnter(to, from, next) {
  //   // to去往的路由,from来源路由 next放行函数 跳转
  //   // console.log(to)
  //   // console.log(from)
  //   if (!localStorage.getItem('username') || !localStorage.getItem('token')) {
  //     // 不允许进入到后台管理界面  跳转到登录页面
  //     Message({
  //       message: '请先登录!',
  //       type: 'warning',
  //       duration: 1000,
  //       onClose: () => {
  //         next('/login')
  //       }
  //     })
  //   } else {
  //     // 即使有token,也需要请求服务器 验证其有效性
  //     axios.get(url.profile).then((res) => {
  //       if (res.data.code === 401) {
  //         Message({
  //           message: '请先登录!',
  //           type: 'warning',
  //           duration: 1000,
  //           onClose: () => {
  //             next('/login')
  //           }
  //         })
  //       } else {
  //         // token有效放行
  //         next()
  //       }
  //     })
  //   }
  // },
  methods: {
    logout() {
      // 二次确认
      // 清除本地登录的信息 token和username
      localStorage.removeItem('username')
      localStorage.removeItem('token')
      localStorage.removeItem('acl')
      this.$message({
        type: 'success',
        message: '注销成功',
        duration: 1500,
        onClose: () => {
          // 跳转到登录页面
          this.$router.push('/login')
        }
      })
    },
    // 切换全屏或者退出全屏
    changeFullScreen() {
      const element = document.documentElement
      // 如果是全屏状态
      if (this.fullscreen) {
        // 如果浏览器有这个Function
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        // 如果浏览器有这个Function
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen()
        }
      }
      // 判断全屏状态的变量
      this.fullscreen = !this.fullscreen
    }
  }
  //   mounted() {
  //     console.log(this.$route)
  //   }
}
</script>

<style lang="scss" scoped>
.el-header {
  background-color: #fff;
}

.el-footer {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #001529;
  color: #333;
}

.el-main {
  background-color: #f0f2f5;
  color: #333;
}

.el-container {
  /* 设置布局容器的高度100vh */
  /* 100%和100vh的区别?  100% 会有滚动条  100vh 可视窗口高度 */
  height: 100vh;
}
.el-menu {
  border-right: none;
}
.header-icon {
  font-size: 25px;
  padding-top: 20px;
  margin-right: 10px;
  cursor: pointer;
}
</style>